<div class="card bg-white border-grey bg-shadow pos-relative">
  <div class="card-body px-lg-3 py-lg-4">
    <h4 class="my-0">
      Project with gallery
    </h4>
  </div>
  <div class="row no-gutters" data-toggle="magnific-popup" data-magnific-popup-settings='{"delegate": "a.project-enlarge", "gallery":{"enabled":true}}'>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-1.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-1-sm.jpg" alt="Project 1" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-2.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-2-sm.jpg" alt="Project 2" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-3.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-3-sm.jpg" alt="Project 3" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-4.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-4-sm.jpg" alt="Project 4" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-5.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-5-sm.jpg" alt="Project 5" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-6.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-6-sm.jpg" alt="Project 6" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-7.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-7-sm.jpg" alt="Project 7" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-8.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-8-sm.jpg" alt="Project 8" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
    <div class="col-md-4 p-2">
      <a href="assets/img/projects/project-9.jpg" class="overlay-hover project-enlarge">
        <img src="assets/img/projects/project-9-sm.jpg" alt="Project 9" class="img-fluid" />
        <span class="overlay-hover-content overlay-dark overlay-op-2"> <i class="ion-android-add icon-4x text-white"></i> </span>
      </a>
    </div>
  </div>
  <div class="card-body p-lg-5">
    <p>Commoveo duis odio praesent probo. Conventio ea iustum pecus premo ulciscor validus. Aliquip augue ille plaga si. Aptent immitto metuo paulatim refoveo sed te validus vindico.</p>
    <dl class="row text-sm">
      <dt class="col-sm-3"><i class="la la-thumb-tack"></i> Client:</dt>
      <dd class="col-sm-9"><a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme">Themelize.me</a></dd>
      <dt class="col-sm-3"><i class="la la-calendar"></i> Date:</dt>
      <dd class="col-sm-9">Feb 2018</dd>
      <dt class="col-sm-3"><i class="la la-tags"></i> Category:</dt>
      <dd class="col-sm-9">Web</dd>
    </dl>
    <a href="https://wrapbootstrap.com/theme/appstrap-responsive-website-template-WB0C6D0H4?ref=tme" title="View Online" class="btn btn-outline-primary btn-sm btn-rounded btn-bold px-4 py-2">View Online <i class="fa fa-chevron-right ml-2"></i></a>
  </div>
</div>